<template>
	<view class="all">
		<view class="all-box" style="background-image: url(https://saiba.shouding711.com/images/my_bg.jpeg);">
			<view class="box-top">
				<view class="box-top-img" :style="{backgroundImage:bg}" >
					
				</view>			

				<view class="box-top-txt">
					{{nickName}}
				</view>
			</view>
		</view>
		
		<view class="box-bot">
			<view @click="onToList" class="bot-cell">
				<view style="margin-right: 10rpx;"><u-icon name="eye"   :color="iconcolor" size="28"></u-icon></view>
				<view class="bot-cell-left">选手列表</view>
				<view class="bot-cell-right">
					<img src="../../static/rightIcon.png" alt="">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'template',
		data(){
			return {
				'nickName':'微信用户',
				'avatarUrl':null,
				'bg':null,
				'iconcolor':'#3c9cff'
			}
		},
		onLoad() {
			
		},
		onShow(){
			if(uni.getStorageSync('nickName')){
				this.nickName= uni.getStorageSync('nickName')
			}
			if(uni.getStorageSync('avatarUrl')!=null){
				this.avatarUrl= uni.getStorageSync('avatarUrl')
				this.bg="url("+ this.avatarUrl+");"
			}
		},
		methods: {
			onToList() {
				uni.navigateTo({
					url: `/pages/playList/index`,
					fail: error => {
						console.log('error；', error)
					}
				})
			}
		}
	}
</script>

<style  lang="scss" scoped>
.all{
	width: 100%;
	
	.all-box{
		width: 100%;
		height: 350rpx;
		background: #dadada;
		
		.box-top{
			width: 500px;
			display: flex;
			align-items: center;
			padding-top: 20rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			.box-top-img{
				width: 150rpx;
				height: 150rpx;
				border-radius: 75rpx;
				background: #fff;
			}
			.box-top-txt{
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}
	.box-bot{
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		.bot-cell{
			width: 100%;
			height: 100rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: #fff;
			font-size: 32rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			
			box-sizing: border-box;
			justify-content: flex-start;
			.bot-cell-left{
				flex-grow: 2;
			}
			.bot-cell-right{
				img{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
}
</style>